<template>
  <el-dialog :id="`order-${order.orderId}`" class="pay-dialog" title="收款信息" v-model="visible" width="420px" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="info">
      <p class="supplier-name">
        <img src="@/assets/images/dianpuxiao.png" />
        <span>供应商：{{ order.supplierName }}</span>
      </p>
      <div class="pay-info">
        <p><span class="info-text">收款人</span>{{ order.supplierName }}</p>
        <p><span class="info-text">收款账户</span>{{ order.bankAccount }}</p>
        <p><span class="info-text">收款银行</span>{{ order.depositBank }}</p>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { computed, watch } from 'vue'
import addWaterMarker from '@/assets/js/waterMarker'

const props = defineProps(['visible', 'order'])
const emit = defineEmits(['update:visible'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

watch(visible, (val) => {
  if (val) {
    addWaterMarker(`order-${props.order.orderId}`, '耶购电子商务')
  }
})
</script>

<style scoped lang="scss">
.info {
  display: flex;
  flex-direction: column;
  padding: 10px 30px;

  .supplier-name {
    display: flex;
    align-items: center;
    line-height: 18px;
    font-weight: 500;
    color: var(--color-text);
    margin-left: 18px;
    margin-bottom: 30px;

    img {
      margin-right: 8px;
    }
  }

  .pay-info {
    margin-left: 44px;

    p {
      display: flex;
      margin-bottom: 30px;

      .info-text {
        margin-right: 30px;
      }
    }
  }
}
</style>
